<template>
  <div class="piacture">
    <el-button type="primary" @click="dialogVisible = true">上传图片</el-button>
    <img :src="src" alt="" ref="picture" />
    -->
    <!-- 弹出框显示 -->

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="图片展示" name="first">图片展示</el-tab-pane>
        <el-tab-pane label="图片上传" name="second">
          <input type="file" ref="input" class="input" @change="onfilechange" />
          <img alt="" ref="images" width="100" />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploader">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 进入展示页面 -->
    <el-button type="primary" @click="upload">进入到图片展示页面</el-button>
    <el-button type="primary" @click="imageUpload">上传展示</el-button>
  </div>
</template>

<script>
import axios from "axios";
import bus from "../../utils/globalbus";
export default {
  name: "HelloWorld",
  // props: {
  //   msg: String
  // }

  data() {
    return {
      activeName: "first",
      dialogVisible: false,
      src: "",
    };
  },
  methods: {
    upload() {
      this.$router.push("./home");
    },
    imageUpload() {
      this.$router.push("./upload");
    },

    onfilechange() {
      const file = this.$refs.input.files[0];
      // console.log(file);

      const blob = window.URL.createObjectURL(file);
      // console.log(blob);
      this.$refs.images.src = blob;
    },

    uploader() {
      const files = this.$refs.input.files[0];
      const fd = new FormData();
      fd.append("files", files, files.name);

      axios
        .post("http://localhost:3300/picture", fd)
        .then((res) => {
          console.log(res);
          this.src = res.data.url;
          beu.$emit("show", this.src);
          // this.$store.dispatch("picture", this.src);
        })
        .catch((err) => {
          console.log(err.response);
        });

      this.dialogVisible = false;
    },
  },
};
</script>

<style scoped lang="less"></style>
